<template>
  <div class="app-viewer">
    <div class="viewer-header">
      <el-row>
        <el-col :span="12">
          <el-row :gutter="10" class="mb20">
            <el-col :span="1.5">
              <el-button type="primary" :disabled="multiple" @click="handleRestore">
                还原
              </el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <transition name="fade">
            <span style="margin-right: 10px">
              <el-input v-model="queryParams.name" placeholder="请输入矿山名称"
                style="width: 200px; margin-right: 10px"></el-input>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button type="primary" @click="resetQuery"> 重置 </el-button>
            </span>
          </transition>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane v-for="(item, i) in typeOptions" :key="i" :label="item.label" :name="item.value"></el-tab-pane>
    </el-tabs>
    <div class="viewer-body">
      <el-table v-loading="loading" :data="infoList" border :header-cell-style="{
        background: '#Fff',
        fontFamily: 'AlibabaPuHuiTi-2-55-Regular',
      }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column v-if="activeType.value === typeOptions[3].value" label="火区名称" align="center" key="fireName"
          prop="fireName" />
        <el-table-column v-if="activeType.value === typeOptions[3].value" label="火区经纬度" align="center" key="bbb"
          prop="bbb" #default="{ row }">
          {{ format(row.longitude) }},{{ format(row.latitude) }}
        </el-table-column>
        <el-table-column v-if="activeType.value !== typeOptions[3].value" label="矿山名称" align="center" key="name"
          prop="name" />
        <el-table-column v-if="activeType.value !== typeOptions[3].value" label="矿山地址" align="center" key="address"
          prop="address" />
      </el-table>

      <pagination v-show="total > 0" :total="total" layout="total, prev,pager,next" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import {
  getJingGongVirtualDeleteList,
  restoreJingGongVirtualDeleteList,
  getLouTianVirtualDeleteList,
  restoreLouTianVirtualDeleteList,
  getWeiKuangVirtualDeleteList,
  restoreWeiKuangVirtualDeleteList,
  getHuoquVirtualDeleteList,
  restoreHuoquVirtualDeleteList,
} from "@/api/data/houtai";

export default {
  name: "Coal",
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 历史数据表格数据
      infoList: [],
      // 弹出层标题
      title: "",
      // 非多个禁用
      multiple: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: "",
      },

      typeOptions: [
        { label: '井工煤矿', value: 'jinggong', list: getJingGongVirtualDeleteList, resetore: restoreJingGongVirtualDeleteList, },
        { label: '露天煤矿', value: 'loutian', list: getLouTianVirtualDeleteList, resetore: restoreLouTianVirtualDeleteList, },
        { label: '尾矿库', value: 'weikuang', list: getWeiKuangVirtualDeleteList, resetore: restoreWeiKuangVirtualDeleteList, },
        { label: '火区', value: 'huoqu', list: getHuoquVirtualDeleteList, resetore: restoreHuoquVirtualDeleteList, },
      ],
      activeName: ''
    };
  },
  computed: {
    activeType() {
      for (const option of this.typeOptions) {
        if (option.value === this.activeName) return option
      }

      return this.typeOptions[0]
    }
  },
  created() {
    this.activeName = this.typeOptions[0].value
  },
  watch: {
    activeName: {
      handler(cur) {
        if (cur) this.getList()
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /** 查询数据列表 */
    getList() {
      this.loading = true;
      this.activeType.list({
        ...this.queryParams,
      }).then((response) => {
        this.infoList = response.data.rows
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: "",
      };
      this.dateRange = [];
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /** 还原按钮操作 */
    handleRestore(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("您正在还原数据，是否确认？")
        .then(() => {
          this.activeType.resetore(ids).then(()=>{
            this.$modal.msgSuccess("还原成功");
            this.getList()
          })
        })
        .catch(() => { });
    },
    format(str) {
      if (!str) return '0'

      const data = str.toString().match(/(\d+.\d{0,2})|(\d+)/)

      return data ? data[0] : '0'
    }
  },
};
</script>

<style lang="scss" scoped>
#myChart {
  width: 960px;
  height: 420px;
}

.query {
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
  text-align: right;
}

.query>>>.el-form--inline .el-form-item {
  margin-right: 0;
  margin-left: 10px;
  margin-bottom: 14px;
  margin-top: 14px;
}

.app-container>>>.el-button--text:hover {
  border-color: #0000;
  background: #0000;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid #4b5057 !important;
}

::v-deep .el-table::before,
.el-table--group::after,
.el-table--border::after {
  border: solid 1px #4b5057 !important;
}

::v-deep .el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #4b5057 !important;
}

::v-deep .el-table--border,
.el-table--group {
  border-color: #4b5057 !important;
}

::v-deep.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #4b5057 !important;
}

::v-deep .el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid #4b5057 !important;
}

::v-deep.el-table--border td,
.el-table--border th {
  border-right: 1px solid #4b5057 !important;
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid rgba(255, 255, 255, 0.17);
  border-right: 1px solid #4b5057 !important;
}

::v-deep .el-table tbody tr:hover>td {
  background-color: #1d2125 !important;
  color: #ffffff;
}

.hanlderArea {
  display: flex;
  justify-content: space-around;
  flex-direction: row;

  .checkDetail {
    font-family: "AlibabaPuHuiTi-2-55-Regular";
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 1px;
    color: #005aff;
    cursor: pointer;
  }
}

::v-deep .el-tabs__item {
  color: #999999;
  font-family: "AlibabaPuHuiTi-2-55-Regular";
  font-size: 14px;

  .is-active {
    font-size: 16px;
  }
}

// color: "#005aff" !important;

::v-deep .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;

  background-color: rgba(153, 153, 153, 0.3);
}
</style>
